<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>城市级联</title>
	<script src="jquery-1.8.3.min.js" ></script>
</head>
<body>
	<select id="cid">
		<option value="">--请选择--</option>
	</select>
</body>
	<script>
		$.ajax({
			"url":"1.php",
			"type":"get",
			"data":{upid:0},
			"dataType":"json",
			success:
				function(data){
					for(var i=0;i<data.length;i++){
						var str = "<option value='"+data[i].id+"'>"+data[i].name+"</option>";
						$("#cid").append(str);
					}
				},

			error:
			function(){
				alert("Ajax响应失败");
			}
		});

		$("select").live("change",function(){
			o = $(this);
			o.nextAll("select").remove();
			id = o.val();
			$.ajax({
				"url":"1.php",
				"type":"get",
				"data":{upid:id},
				"dataType":"json",
				success:
					function(data){
					select = $("<select></select>");
					if(data.length>0){

						for(var i=0;i<data.length;i++){
							var str = "<option value='"+data[i].id+"'>"+data[i].name+"</option>";
							select.append(str);
						}
						o.after(select);
					}
				}
			})
		})
	</script>
</html>